<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form id="reportTaskForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
            <input type="hidden" name="id" v-model="item.id"/>
            <input type="hidden" name="token" v-model="item.token"/>
            <input type="hidden" name="newFlag" v-model="newFlag"/>
            <div class="clearfix "></div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">报送类别：</label>
                <div class="col-md-12">
                  <select data-placeholder="选择报送类别" id="bean-type" name="type" class="form-control" required="" aria-required="true" aria-describedby="bean-type-error" maxlength="255" aria-invalid="true">
                    <option value="月报">月报</option>
                    <option value="通报">通报</option>
                    <option value="简报">简报</option>
                    <option value="专报">专报</option>
                  </select>
                  <span id="bean-type-error" class="help-block m-b-none" for="bean-type"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">报送标题：</label>
                <div class="col-md-12">
                  <input id="bean-title" name="title" v-model="item.title" class="form-control" type="text" placeholder="请输入报送标题" required="" aria-required="true" aria-describedby="bean-title-error" maxlength="255" aria-invalid="true">
                  <span id="bean-title-error" class="help-block m-b-none" for="bean-title"></span>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">报送单位：</label>
                <div class="col-md-12">
                  <select multiple id="bean-taskOrgId" name="taskOrgId" required="" autoReset="true" class="form-control chosen-select" data-placeholder="选择报送单位" tabindex="1">
                    <option :value="orgItem.id" :selected="item.taskOrgId == orgItem.id" v-for="orgItem in orgItems">{{orgItem.name}}</option>
                  </select>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">截止日期：</label>
                <div class="col-md-12">
                  <input autocomplete="off" id="bean-dateDeadline" name="dateDeadline" v-model="item.dateDeadline" class="laydate-icon form-control layer-date" type="text" placeholder="请输入截止日期" required="" aria-required="true" aria-describedby="bean-dateDeadline-error" aria-invalid="true">
                  <span id="bean-dateDeadline-error" class="help-block m-b-none" for="bean-dateDeadline"></span>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">任务内容：</label>
                <div class="col-md-12">
                  <textarea id="bean-taskContent" name="taskContent" class="form-control" placeholder="请输入任务内容" required="" aria-required="true" aria-describedby="bean-taskContent-error" maxlength="1255" aria-invalid="true">{{item.taskContent}}</textarea>
                  <span id="bean-taskContent-error" class="help-block m-b-none" for="bean-taskContent"></span>
                </div>
              </div>
            </div>

            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div>
                <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'
  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'
  import 'layui-laydate/dist/theme/default/laydate.css'
  import laydate from 'layui-laydate'
  import {apiUtil, axiosContentType, site} from '@/assets/js/boss'
  import Swal from 'sweetalert2';
  import '#/chosen/chosen.css'
  import '#/chosen/chosen.jquery.js'

  export default {
    data() {
      return {
        item: {},
        newFlag: 0,
        uuidToken: '',
        orgItems: []
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      $('#reportTaskForm').validate();
      that.staff.init(function () {
        that.newFlag = sessionStorage.getItem(site.reportTask.info);
        if (that.newFlag) that.uuidToken = apiUtil.guid();
        if (apiUtil.existSessionKey(site.reportTask.info)) {
          that.info();
        }
      });
      laydate.render({
        elem: '#bean-dateDeadline',
        event: 'click',
        done: function (val) {
          that.item.dateDeadline = val;
        }
      });
      that.getOrglist();
      that.initSelect();
    },
    methods: {
      initSelect: function () {
        var config = {
          '.chosen-select': {},
          '.chosen-select-deselect': {allow_single_deselect: true},
          '.chosen-select-no-single': {disable_search_threshold: 10},
          '.chosen-select-no-results': {no_results_text: '无匹配数据'},
          '.chosen-select-rtl': {rtl: true},
          '.chosen-select-width': {width: '95%'}
        }
        for (var selector in config) {
          $(selector).chosen(config[selector]);
        }
      },
      info() {
        let that = this;
        axios.get(site.reportTask.info + sessionStorage.getItem(site.reportTask.info), {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.item = result.data;
            setTimeout(function () {
              $('.chosen-select').trigger('chosen:updated');
            }, 300);
          } else {
            Swal.fire(result.message);
          }
        });
      },
      getOrglist() {
        let that = this;
        axios.post(site.orgInfo.list, {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.orgItems = result.data;
            setTimeout(function () {
              $('.chosen-select').trigger('chosen:updated');
            }, 300);
          } else {
            Swal.fire(result.message);
          }
        });
      },
      save() {
        let that = this;
        if ($('#reportTaskForm').valid()) {
          let dataFormObj = $('#reportTaskForm').serializeObject();
          dataFormObj.taskOrgName = [];
          var taskOptionArr = $('#bean-taskOrgId').find('option:selected');
          $.each(taskOptionArr, function (index, item) {
            dataFormObj.taskOrgName.push($(item).text().replace(/[\r\n]/g, ','));
          });
          axios.post(site.reportTask.save, $.param(dataFormObj, true),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
            const result = response.data;
            // console.info("获取数据.." + JSON.stringify(result));
            if (result.code === 0) {
              parent.$vueApp.page();
              Swal.fire('保存成功!');
              that.lbox.closeMyBoxLayer()
            } else {
              Swal.fire(result.message);
            }
          });
        }
      }
    }
  }
</script>

